<script lang="ts" setup>
  import { computed, inject } from "vue";

  interface FormItemProps {
    label?: string;
    required?: boolean;
  }

  withDefaults(defineProps<FormItemProps>(), {
    required: false,
  });

  const direction = inject<"horizontal" | "vertical">("direction", "horizontal");

  const styles = computed<any>(() => {
    const newStyles: any = {
      flexDirection: direction === "vertical" ? "column" : "row",
    };
    if (direction === "horizontal") {
      newStyles.alignItems = "center";
    }
    return newStyles;
  });
</script>

<template>
  <div class="umrp-form-item" :style="styles">
    <div class="label">
      <div class="star" v-if="required">*</div>
      <div>{{ label }}</div>
    </div>
    <div class="value">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-form-item {
    display: flex;
    gap: 10px;

    .label {
      color: #333;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 6px;
    }

    .star {
      color: red;
    }

    .value {
      flex: 1;
    }
  }
</style>
